$(function () {
  // 循环渲染内容
  // time 停止的条件 renderSite 渲染的地方    renderContent 渲染的内容
  function renderLoop(time, renderSite, renderContent) {
    let arr = []
    for (let i = 0; ; i++) {
      if (i > time) {
        break
      }
      arr.push(i)
      renderSite.append(renderContent)
    }
    return arr
  }

  let l = `
  <li class="cloneCommodityClassificationTitle">
    <p>
      <a href="#">图书</a><span>、</span>
      <a href="#">电子书</a><span>、</span>
      <a href="#">童书</a>
    </p>
    <dl>
      <dt>文艺</dt>
      <dd><a href="#">小说</a>   <a href="#">文学</a>   <a href="#">传记</a>   <a href="#">青春</a>   <a href="#">动漫</a>   <a href="#">艺术</a>   <a href="#">摄影</a>   <a href="#">明星</a></dd>
      <dt>文艺</dt>
      <dd><a href="#">小说</a>   <a href="#">文学</a>   <a href="#">传记</a>   <a href="#">青春</a>   <a href="#">动漫</a>   <a href="#">艺术</a>   <a href="#">摄影</a>   <a href="#">明星</a></dd>
      <dt>文艺</dt>
      <dd><a href="#">小说</a>   <a href="#">文学</a>   <a href="#">传记</a>   <a href="#">青春</a>   <a href="#">动漫</a>   <a href="#">艺术</a>   <a href="#">摄影</a>   <a href="#">明星</a></dd>
    </dl>
  </li>
`

  let RenderingRecommend = `
    <tr class="fl">
       <td class="recommend-commodity">
        <img src="./img/index06_05.jpg" alt="">
        <p class="recommend-time-limit">限时抢
        <span class="triangle"></span>
        </p>
        <p class="recommend-message">黑爵青蜂侠六键电竞游戏鼠标</p>
        <p class="recommend-guarantee">全国联保 一年免费包换</p>
        <p class="recommend-price">￥:299</p>
       </td>
    </tr>
  `

  let booksSynopsis = `
  <div class="books-synopsis">
    <span class="books-quantity">2</span>
    <p>就喜欢你看不惯我 又干不</p>
    <div class="show">
      <img src="./img/index08_05.jpg" alt="">
      <span>从你的世界路过入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐，1500万次转发，超4亿次阅读</span>
    </div>
  </div>
  `

  let dd = `
  <li>
  <img src="./img/index25_12.jpg" alt="">
  <p class="promotion-synopsis">Pigeon法国制奶嘴，无毒天然乳胶</p>
  <p class="promotion-price">￥:189</p>
  <p class="promotion-evaluate">&emsp;&emsp;已有<span>988</span>条评价</p>
  </li>
`

  // 循环渲染新书畅销榜
  renderLoop(10, $('#goodsCategory .content'), l)
  // 循环渲染新书畅销榜
  renderLoop(9, $('#dailyRecommendation .content'), RenderingRecommend)
  // 第一次循环渲染推广商品内容li
  renderLoop(2, $('#promotionOfGoods .content'), dd)
  // 第二次循环渲染推广商品内容ul
  renderLoop(0, $('.promotion-content'), $('.promotion-content ul').clone())

  // 循环渲染商品分类goodsCategory
  // for (let i = 0; ; i++) {
  //   let l = `
  //   <li class="cloneCommodityClassificationTitle">
  //     <p>
  //       <a href="#">图书</a><span>、</span>
  //       <a href="#">电子书</a><span>、</span>
  //       <a href="#">童书${i}</a>
  //     </p>
  //     <dl>
  //       <dt>文艺${i}</dt>
  //       <dd><a href="#">小说</a>   <a href="#">文学</a>   <a href="#">传记</a>   <a href="#">青春</a>   <a href="#">动漫</a>   <a href="#">艺术</a>   <a href="#">摄影</a>   <a href="#">明星</a></dd>
  //       <dt>文艺${i}</dt>
  //       <dd><a href="#">小说</a>   <a href="#">文学</a>   <a href="#">传记</a>   <a href="#">青春</a>   <a href="#">动漫</a>   <a href="#">艺术</a>   <a href="#">摄影</a>   <a href="#">明星</a></dd>
  //       <dt>文艺${i}</dt>
  //       <dd><a href="#">小说</a>   <a href="#">文学</a>   <a href="#">传记</a>   <a href="#">青春</a>   <a href="#">动漫</a>   <a href="#">艺术</a>   <a href="#">摄影</a>   <a href="#">明星</a></dd>
  //     </dl>
  //   </li>
  // `

  //   if (i >= 10) {
  //     break
  //   }
  //   $('#goodsCategory .content').append(l)
  // }

  //循环渲染今日推荐
  // for (let j = 0; ; j++) {
  //   let RenderingRecommend = `
  //   <tr class="fl">
  //     <td class="recommend-commodity">
  //      <img src="./img/index06_05.jpg" alt="">
  //      <p class="recommend-time-limit">限时抢
  //       <span class="triangle"></span>
  //      </p>
  //       <p class="recommend-message">黑爵青蜂侠六键电竞游戏鼠标</p>
  //       <p class="recommend-guarantee">全国联保 一年免费包换</p>
  //       <p class="recommend-price">￥:299</p>
  //     </td>
  //   </tr>
  //   `

  //   if (j >= 10) {
  //     break
  //   }
  //   $('#dailyRecommendation .content').append(RenderingRecommend)
  //   if (j > 4) {
  //     $('#dailyRecommendation .content').find('img:gt(4)').attr('src', './img/index06_06.jpg')
  //     $('#dailyRecommendation .content').find('.recommend-message:gt(4)').html('小熊家用静音加湿器')
  //     $('#dailyRecommendation .content').find('.recommend-guarantee:gt(4)').html('唯美外观 微米级喷雾')
  //     $('#dailyRecommendation .content').find('.recommend-price:gt(4)').html('￥:89')
  //   }
  // }

  //循环渲染新书畅销榜
  // for (let a = 0; ; a++) {
  //   let booksSynopsis = `
  //   <div class="books-synopsis">
  //     <span class="books-quantity">${a + 1}</span>
  //     <p>就喜欢你看不惯我 又干不</p>
  //     <div class="show">
  //       <img src="./img/index08_05.jpg" alt="">
  //       <span>从你的世界路过入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐，1500万次转发，超4亿次阅读</span>
  //     </div>
  //   </div>
  //   `

  //   if (a >= 8) {
  //     break
  //   }
  //   $('#books .content').append(booksSynopsis)
  // }

  // 新书畅销榜手风琴
  $('.books-synopsis').click(function () {
    $(this).find('.show').show()
    $(this).siblings('.books-synopsis').find('.show').hide()
  })

  /*   for (b = 1; ; b++) {
    let mmm = `
    <div>
    <img class="fl" src="./img/index12_05.jpg" alt="">
    <img class="fl" src="./img/index12_05.jpg" alt="">
    <img class="fl" src="./img/index12_05.jpg" alt="">
  </div>
    `
    if (b > 3) {
      break
    }
    $('.repetitio-main-right .content').append(mmm)
    if (b === 1) {
      $('.repetitio-main-right .content>:eq(0)').addClass('on')
    }
  }

  let repetitio = 0
  $('.title-rigth div').mouseover(function () {
    $(this).addClass('on')
    // $('.repetitio-main-right').hide()
    repetitio = $(this).index()
    $(`.repetitio-main-right .content>:eq(repetitio)`).hide()
  })
  $('.title-rigth div').mouseout(function () {
    $(this).removeClass('on')
    // $('.repetitio-main-right').show()
    $(`.repetitio-main-right .content>:eq(repetitio)`).show()
  }) */

  $('.repetitio').on('click', '.title-rigth div', function () {
    $(this).addClass('on')
    $(this).siblings('div').removeClass('on')
    $(this)
      .closest('.repetitio')
      .find('.shower')
      .find(`div:eq(${$(this).index()})`)
      .show()
    $(this)
      .closest('.repetitio')
      .find('.shower')
      .find(`div:eq(${$(this).index()})`)
      .siblings('div')
      .hide()
  })

  for (cc = 0; ; cc++) {
    let repetitioDom = $('.repetitio').clone(true)
    if (cc === 2) {
      break
    }
    $('.Childrens-wear').append(repetitioDom)
    $('.Childrens-wear').find('repetitio').addClass('Kids')
  }

  // 轮播图
  function banner(bannerInner, boxh, w, h) {
    $(bannerInner).tyslide({
      boxh, //盒子的高度
      w, //盒子的宽度
      h, //图片的高度
      isShow: true, //是否显示控制器
      isShowBtn: true, //是否显示左右按钮
      controltop: 40, //控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
      controlsW: 14, //控制按钮宽度
      controlsH: 2, //控制按钮高度
      radius: 5, //控制按钮圆角度数
      controlsColor: '#d7d7d7', //普通控制按钮的颜色
      controlsCurrentColor: '#ff6600', //当前控制按钮的颜色
      isShowNum: true //是否显示数字
    })
  }

  // 服装 户外运动 童装轮播图
  banner($('.bannerInner3'), 340, 430, 340)
  // 主轮播图
  banner($('#bannerInner'), 460, 1200, 460)
  // 图书 电子书轮播图
  banner($('#bannerInner2'), 220, 336, 220)

  for (let g = 0; ; g++) {
    let gg = ['图书', '电子书', '原创文学', '服装', '运动户外', '孕婴童', '家居', '创意文具', '地方特产', '电器城']
    if (g > 9) {
      break
    }
    $('#head .nav .content').append(`<a href="#">${gg[g]}</a>`)
  }
})
